<template>
  <div style="height: 100%; width: 100%">
    <el-input v-model="logStr" type="textarea" class="log-box" readonly resize="none" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import bus from "vue3-eventbus";
import eventKey from "@/const/busEventConstKey";
import dayjs from "dayjs";

const logStr = ref("");
bus.on(eventKey.receiveMessage, (data) => {
  let log = `${dayjs(data.time).format("YYYY/MM/DD HH:mm:ss")} => 【${data.title}】${
    data.message
  }\n`;
  log = log + logStr.value;
  let arr = log.split("\n").slice(0, 50); //只保留50条日志

  logStr.value = arr.join("\n");
});
</script>
<style lang="scss" scoped>
.log-box {
  background-color: black;
  height: 100%;
  ::v-deep(.el-textarea__inner) {
    background-color: black;
    border: 0;
    box-shadow: inherit;
    height: 100%;
    color: green;
  }
}
</style>
